<template>
  <div class="page-container" style="padding-bottom: 0px">
    <div
      class="page-form-bg"
      style="overflow: auto"
      :style="{
        height: isShowTools ? 'calc(100vh - 295px)' : 'calc(100vh - 205px)',
      }"
    >
      <el-form
        ref="form"
        class="query-more-form"
        size="mini"
        label-width="85px"
        :model="form"
        :disabled="dialogType === 'detail' ? true : false"
      >
        <el-row>
          <el-col :span="16">
            <el-col :span="24">
              <div class="page-form-title page_form_title">
                <span class="label">工单0登记</span>
                <span class="caseNumber"
                  >案件编号:{{ form.code
                  }}<span class="caseNumberSon" v-show="form.mergeCaseCode"
                    >【{{ form.mergeCaseCode }}】</span
                  ></span
                >
                <!-- <span></span> -->
              </div>
            </el-col>
            <el-col :span="24" style="padding: 20px">
              <!-- row1 -->
              <el-row :gutter="20" class="mb-20">
                <el-col :span="6"
                  ><el-form-item label="来电号码"
                    ><el-input
                      v-model="form.reportTel"
                      placeholder="请输入来电号码"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="姓名"
                    ><el-input
                      v-model="form.reportName"
                      placeholder="请输入姓名"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="性别">
                    <el-select
                      v-model="form.reportGender"
                      placeholder="请选择性别"
                    >
                      <el-option
                        v-for="item in genderArr"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                      />
                    </el-select> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-button size="mini" class="submit-btn"
                    >历史工单</el-button
                  ></el-col
                >
              </el-row>
              <!-- row2 -->

              <el-row :gutter="20">
                <el-col :span="6"
                  ><el-form-item label="来源类型"
                    ><el-input
                      v-model="form.categoryDcaName"
                      placeholder="请输入来源类型"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="诉求类型"
                    ><el-input
                      v-model="form.sourceName"
                      placeholder="请输入诉求类型"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="紧急级别">
                    <el-select v-model="form.level">
                      <el-option
                        v-for="item in levelArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.value"
                      /> </el-select></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="是否保密"
                    ><el-input
                      v-model="form.secrecy"
                      placeholder="请输入是否保密"
                      maxlength="255" /></el-form-item
                ></el-col>
              </el-row>

              <!-- row3 -->
              <el-row :gutter="20">
                <el-col :span="6"
                  ><el-form-item label="区/市/县"
                    ><el-input
                      v-model="form.addressCityName"
                      placeholder="请输入区/市/县"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="街道/乡镇"
                    ><el-input
                      v-model="form.addressStreetName"
                      placeholder="请输入街道/乡镇"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="社区/村"
                    ><el-input
                      v-model="form.addressCommunityName"
                      placeholder="请输入社区/村"
                      maxlength="255" /></el-form-item
                ></el-col>
                <!-- <el-col :span="6"
                  ><el-form-item label="是否回复"
                    ><el-input
                      v-model="form.name"
                      placeholder="请输入是否回复"
                      maxlength="255" /></el-form-item
                ></el-col> -->
                <el-col :span="6"
                  ><el-form-item label="风险预警"
                    ><el-input
                      v-model="form.riskMessage"
                      placeholder="请输入风险预警"
                      maxlength="255" /></el-form-item
                ></el-col>
              </el-row>

              <!-- row4 -->
              <el-row :gutter="20" class="mb-20">
                <el-col :span="6"
                  ><el-form-item label="行业"
                    ><el-input
                      v-model="form.categoryDcaName"
                      placeholder="请输入行业"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="大类"
                    ><el-input
                      v-model="form.categorySupName"
                      placeholder="请输入大类"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="小类"
                    ><el-input
                      v-model="form.categorySubName"
                      placeholder="请输入小类"
                      maxlength="255" /></el-form-item
                ></el-col>
                <!-- <el-col :span="6"
                  ><el-button size="mini" class="submit-btn"
                    >智能分类</el-button
                  ></el-col
                > -->
              </el-row>

              <!-- row5 -->
              <el-row :gutter="20">
                <el-col :span="18"
                  ><el-form-item label="位置"
                    ><el-input
                      v-model="form.addressDetailedStandard"
                      placeholder="请输入位置"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-button size="mini" class="submit-btn"
                    >地图定位</el-button
                  ></el-col
                >

                <el-col :span="24"
                  ><el-form-item label="工单标题"
                    ><el-input
                      v-model="form.title"
                      placeholder="请输入工单标题"
                      maxlength="255" /></el-form-item
                ></el-col>

                <el-col :span="24"
                  ><el-form-item label="诉求内容" class="appealContent"
                    ><el-input
                      type="textarea"
                      :rows="2"
                      v-model="form.content"
                      placeholder="请输入诉求内容"
                      maxlength="255" /></el-form-item
                ></el-col>
              </el-row>
            </el-col>

            <!-- <el-col :span="24">
              <div class="page-form-title">
                <span class="label">疑似案件</span>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="page-form-table" style="padding: 20px">
                <el-table
                  v-loading="tableLoading"
                  border
                  size="small"
                  :data="tableData"
                  height="300px"
                  style="width: 100%"
                >
                  <el-table-column type="selection" width="45" />
                  <el-table-column
                    prop="sourceName"
                    label="来源"
                    show-overflow-tooltip
                    width="80"
                  />
                  <el-table-column
                    prop="nodeNowName"
                    label="办理环节"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="categoryDcaName"
                    label="	行业名称"
                    show-overflow-tooltip
                    width="100"
                  />
                  <el-table-column
                    prop="code"
                    label="工单编码"
                    show-overflow-tooltip
                    width="100"
                  />
                  <el-table-column label="案件时间" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <div>
                        {{ parseTime(scope.row.reportTime) }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="categorySupName"
                    label="案件大类"
                    show-overflow-tooltip
                    width="100"
                  />
                  <el-table-column
                    prop="categorySubName"
                    label="案件小类"
                    show-overflow-tooltip
                    width="100"
                  />
                  <el-table-column label="操作" width="90" fixed="right">
                    <template slot-scope="{ row }">
                      <el-button
                        class="table-inner-btn"
                        type="text"
                        size="mini"
                        @click="handleDetail(row.code)"
                        >详情</el-button
                      >
                      <el-button class="table-inner-btn" type="text" size="mini"
                        >流程</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-col> -->
          </el-col>

          <el-col :span="8" style="padding: 10px 5px 10px 20px">
            <!-- 地图 -->
            <SearchPanel @change="handleSearchPanelChange">
              <div class="map-panel mb-20">
                <div id="map" ref="map" />
              </div>
            </SearchPanel>

            <div class="steps-panel of-auto">
              <div class="steps-title" />
              <div class="steps-content" :style="{ height: height }">
                <el-steps class="custom-steps" direction="vertical" :active="1">
                  <el-step
                    v-for="(item, index) in taskHistoryList"
                    :key="index"
                  >
                    <template slot="icon">
                      <span
                        class="status"
                        :class="index === 0 ? 'color-1' : ''"
                      />
                    </template>
                    <template slot="title">
                      <div class="title">
                        {{ item.nodeName }}
                        <img
                          v-show="item.overtimeFlag === 0"
                          :src="case1"
                          class="w-60 h-15"
                          alt=""
                        />
                        <img
                          v-show="item.overtimeFlag === 1"
                          :src="case1"
                          class="w-60 h-15"
                          alt=""
                        />
                      </div>
                      <div class="time fs-12">
                        {{ parseTime(item.completeTime) }}
                      </div>
                    </template>
                    <template slot="description">
                      <div class="step-content step_content_style">
                        <div class="step-content-left">
                          <div>办理人：{{ item.creatUserName }}</div>
                          <div>办理部门：{{ item.creatDeptName }}</div>
                          <div>办理意见：{{ item.nodeOpinion }}</div>
                        </div>
                        <div class="step-content-right">
                          <img
                            :src="case4"
                            alt=""
                            @click="imageDialog(item.attachments)"
                          />
                        </div>
                      </div>
                    </template>
                  </el-step>
                </el-steps>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-if="buttonDisable" class="bottom-btn-panel flex-end-center">
      <!-- 按钮提示 -->
      <!-- 核实派遣，核实反馈，案件派发，处置反馈，核查派遣，核查反馈，案件回访，案件结案，节点延期，案件延期，案件回退 -->
      <div v-if="form.nodeNowCode === '1001' || form.nodeNowCode === '103'">
        <el-button class="operation-btn red mr-10" @click="handleShowDispatch">
          案件派发
        </el-button>
        <el-button class="operation-btn yellow mr-10" @click="examine(1)">
          核实派遣
        </el-button>
        <el-button class="operation-btn yellow mr-10" @click="examine(4)">
          核查派遣
        </el-button>
        <el-button class="operation-btn yellow mr-10" @click="examine(7)">
          案件回访
        </el-button>
        <el-button class="operation-btn yellow mr-10" @click="examine(11)">
          案件结案
        </el-button>
      </div>
      <div v-else-if="form.nodeNowCode === '102'">
        <el-button class="operation-btn yellow mr-10" @click="examine(2)">
          核实反馈
        </el-button>

        <el-button class="operation-btn yellow mr-10" @click="examine(5)">
          核查反馈
        </el-button>
        <el-button class="operation-btn yellow mr-10" @click="examine(6)">
          处置派遣
        </el-button>
      </div>
      <div
        v-else-if="
          form.nodeNowCode === '200' ||
          form.nodeNowCode === '203' ||
          form.nodeNowCode === '1002'
        "
      >
        <el-button class="operation-btn yellow mr-10" @click="examine(3)">
          处置反馈
        </el-button>
        <el-button class="operation-btn yellow mr-10" @click="examine(8)"
          >案件延期</el-button
        >
        <el-button class="operation-btn yellow mr-10" @click="examine(9)"
          >案件回退</el-button
        >
      </div>
      <div v-else-if="form.nodeNowCode === '401'">
        <el-button class="operation-btn yellow mr-10">延期审核</el-button>
      </div>
      <div v-else-if="form.nodeNowCode === '403'">
        <el-button class="operation-btn yellow mr-10">回退审核</el-button>
      </div>
    </div>
    <DispatchDialog
      :dialogVisible="dispatchDialogVisible"
      @closeDialog="dispatchDialogVisible = false"
      :caseCode="caseCode"
    />
    <ExamineDialog
      :dialog-visible="examineDialogVisible"
      :title="dialogTitle"
      :case-code="caseCode"
      :status="status"
      @closeDialog="closeExaminDialog"
    />

    <!-- 展示图片的弹窗 -->
    <ImageDialog
      :dialogVisible="dispatchImageDialogVisible"
      @closeDialog="dispatchImageDialogVisible = false"
      :imageDate="imageData"
    />
  </div>
</template>

<script>
import case1 from "@/assets/images/case/case1.png";
import case2 from "@/assets/images/case/case2.png";
import case3 from "@/assets/images/case/case3.png";
import case4 from "@/assets/images/case/case4.png";
import ImageDialog from "./../casedeal/components/imageDialog";
import SearchPanel from "@/components/SearchPanel";
import Pagination from "@/components/Pagination";
import CaseCardItem from "@/components/CaseCardItem";
import DispatchDialog from "./../casedeal/components/dispatchDialog";
import ExamineDialog from "./../casedeal/components/examineDialog";
import { caseMessage, caseSimilar } from "@/api/case.js";
import { wfmTaskHistory } from "@/api/wfm/wfm.js";
import { parseTime } from "@/utils/index";
import BMap from "BMap";
export default {
  name: "CaseDetail",
  components: {
    SearchPanel,
    Pagination,
    CaseCardItem,
    DispatchDialog,
    ExamineDialog,
    ImageDialog,
  },
  computed: {
    isShowTools() {
      return this.$route.meta.tools;
    },
  },
  data() {
    return {
      case1,
      case2,
      case3,
      case4,
      tableLoading: false,
      examineDialogVisible: false,
      dispatchDialogVisible: false,
      dispatchImageDialogVisible: false,
      isShow: true,
      height: "400px",

      imageData: [],

      form: {},
      tableData: [],
      taskHistoryList: [],
      map: "",
      mapZoom: 14,
      query: {
        categoryDcaCode: "",
        categorySubCode: "",
        categorySupCode: "",
        dimension: "",
        longitude: "",
        type: "",
      },
      caseCode: "",
      dialogType: "",
      // 性别
      genderArr: [
        { value: 0, label: "女" },
        { value: 1, label: "男" },
      ],
      levelArr: [
        { id: 0, value: "普通" },
        { id: 1, value: "紧急" },
        { id: 2, value: "特急" },
      ],
      dialogTitle: "",
      status: 0,
      buttonDisable: true,
    };
  },
  created() {},
  mounted() {
    // this.initData();
    // this.initMap();
    this.InitializeMap();
    this.locationPosition();
  },
  methods: {
    parseTime,
    handleShowDispatch() {
      this.dispatchDialogVisible = true;
    },

    initMap() {
      // 创建Map实例
      this.map = new BMap.Map("map");
      // 初始化地图,设置中心点坐标和地图级别
      this.map.centerAndZoom(
        new BMap.Point(104.072242, 30.663711),
        this.mapZoom
      );
      // 设置地图显示的城市 此项是必须设置的
      this.map.setCurrentCity("成都");
      // 启用滚轮放大缩小，默认禁用
      this.map.enableScrollWheelZoom(true);
      // 启用地图惯性拖拽，默认禁用
      this.map.enableContinuousZoom(true);
    },

    initData() {
      this.buttonDisable = this.$route.params.buttonDisable;
      if (this.$route.params.caseCode) {
        this.caseCode = this.$route.params.caseCode;
        this.dialogType = this.$route.params.dialogType;
        this.getCaseMsg(this.$route.params.caseCode);
        this.getTaskHistory(this.$route.params.caseCode);
        // this.getCaseSimilar();
      }
    },

    // 获取定位信息
    locationPosition() {
      let self = this;
      //创建地址解析器实例
      var myGeo = new BMap.Geocoder();
      // 将地址解析结果显示在地图上，并调整地图视野
      myGeo.getPoint(this.form.addressDetailedStandard, function (point) {
        if (point) {
          self.latitudeAndLongitude = point;
          self.form.longitude = point.lng;
          self.form.dimension = point.lat;
          self.map.clearOverlays();
          self.map.centerAndZoom(point, 16);
          self.map.addOverlay(new BMap.Marker(point));
        } else {
          self.$message.error("您选择的地址没有解析到结果！");
        }
      });
    },

    handleDetail(data) {
      this.$router.push({
        name: "CaseDetail",
        params: { caseCode: data },
      });
    },
    // 查询案件的详情信息
    getCaseMsg(caseCode) {
      caseMessage(caseCode).then((result) => {
        let { code, data } = result;
        if (code == 200) {
          if (data.secrecy == 1) {
            data.secrecy = "保密";
          } else if (data.secrecy == 0) {
            data.secrecy = "不保密";
          }
          this.form = data;
          this.query.categoryDcaCode = data.categoryDcaCode;
          this.query.categorySubCode = data.categorySubCode;
          this.query.categorySupCode = data.categorySupCode;
          this.query.dimension = data.dimension;
          this.query.longitude = data.longitude;
          this.query.type = data.type;
          this.getCaseSimilar();
        }
      });
    },
    // 查询疑似案件的信息
    getCaseSimilar() {
      this.tableLoading = true;
      caseSimilar(this.query)
        .then((result) => {
          let { rows, code, total } = result;
          if (code == 200) {
            this.tableLoading = false;
            this.tableData = rows;
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    // 图片的弹窗
    imageDialog(val) {
      this.dispatchImageDialogVisible = true;
      this.imageData = val;
    },

    // 查询案件流程的信息
    getTaskHistory(caseCode) {
      wfmTaskHistory({ caseCode: caseCode })
        .then((result) => {
          let { rows, code, total } = result;
          if (code == 200) {
            // this.imageData=rows
            this.taskHistoryList = rows;
          }
        })
        .catch(() => {});
    },
    // 各种派遣
    examine(val) {
      this.examineDialogVisible = true;
      this.status = val;
      switch (val) {
        case 1:
          this.dialogTitle = "核实派遣";
          break;
        case 2:
          this.dialogTitle = "核实反馈";
          break;
        case 3:
          this.dialogTitle = "处置反馈";
          break;
        case 4:
          this.dialogTitle = "核查派遣";
          break;
        case 5:
          this.dialogTitle = "核查反馈";
          break;
        case 6:
          this.dialogTitle = "处置派遣";
          break;
        case 7:
          this.dialogTitle = "案件回访";
          break;
        case 8:
          this.dialogTitle = "案件延期";
          break;
        case 9:
          this.dialogTitle = "案件回退";
          break;
        case 11:
          this.dialogTitle = "案件结案";
        default:
          break;
      }
    },
    closeExaminDialog() {
      this.examineDialogVisible = false;
      this.getCaseMsg(this.caseCode);
      this.getTaskHistory(this.caseCode);
    },

    // 初始化地图
    InitializeMap() {
      // 百度地图API功能
      this.map = new BMap.Map("map"); // 创建Map实例
      this.map.centerAndZoom("崇州市", 14); // 初始化地图,设置中心点坐标和地图级别
      //添加地图类型控件
      this.map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
        })
      );
      this.map.enableScrollWheelZoom(true);
      let self = this;
      this.map.addEventListener("click", function (e) {
        self.map.clearOverlays();
        const point = new BMap.Point(e.point.lng, e.point.lat);
        self.form.longitude = e.point.lng;
        self.form.dimension = e.point.lat;
        var marker = new BMap.Marker(point);
        self.map.addOverlay(marker);
        var geoc = new BMap.Geocoder();
        geoc.getLocation(point, function (rs) {
          var addComp = rs.addressComponents;
          self.form.addressDetailedStandard =
            addComp.province +
            addComp.city +
            addComp.district +
            addComp.street +
            addComp.streetNumber;
        });
      });

      this.buttonDisable = this.$route.params.buttonDisable;
      if (this.$route.params.caseCode) {
        this.caseCode = this.$route.params.caseCode;
        this.dialogType = this.$route.params.dialogType;
        this.getCaseMsg(this.$route.params.caseCode);
        this.getTaskHistory(this.$route.params.caseCode);
        // this.getCaseSimilar();
      }
    },

    handleSearchPanelChange(flag) {
      this.isShow = flag;
    },
  },
};
</script>

<style lang="scss" scoped>
.steps-panel {
  // height: 440px;
  margin-top: 20px;
  .steps-title {
    height: 36px;
    background: url(../../assets/tools/title_bg.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .steps-content {
    height: 400px;
    padding: 10px 10px 5px 10px;
    overflow: auto;
  }
}
.map-panel {
  #map {
    height: 400px;
    border: 1px solid #eee;
  }
}
.flow-describe {
  padding-bottom: 7px;
}
.step_content_style {
  // display: flex;
  // justify-content: space-between;
  position: relative;
}
.step_content_style .step-content-right {
  position: absolute;
  right: -1px;
  top: -8px;
  cursor: pointer;
}
.tital_image {
  margin-left: 10px;
}

.page_form_title {
  display: flex;
  justify-content: space-between;
}

/deep/.el-step__description {
  padding-right: 0;
}

// 顶部案件编号
.page_form_title {
  display: flex;
  justify-content: space-between;
}

/deep/.appealContent .el-form-item__label {
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.caseNumber {
  font-weight: 700;
  .caseNumberSon {
    font-weight: 400;
    color: #626161;
  }
}
</style>
